* {
    margin: 0;
    padding: 0;
}

#main {
    width: 100%;
    height: 100%;

    background-image: linear-gradient(45deg, #98CD8D 16.67%, #F6F0CF 16.67%, #F6F0CF 33.33%, #fff 33.33%, #fff 50%, #98CD8D 50%, #98CD8D 66.67%, #F6F0CF 66.67%, #F6F0CF 83.33%, #fff 83.33%, #fff 100%);
    background-size: 84.85px 84.85px;
    /* 背景图片 暂时用这个 后期再修改 而且这个背景图片位置在html同文件夹下*/
    background-size: 100% 100%;
    position: relative;

}
#maint{width:100%; height:100%;margin: 0%;position: relative;}

#jindu{width:0%; height:38px; margin-top:1px; background:red; border-bottom: 2px solid black;}

#shuoming h1,#shuoming p,#shuoming h3{
    text-align: center;
}
#btp{
    position: absolute;
    left:39%;
    top: 34%;
    display:block;
}

#restart{
    display:none;
}

.hide{
    display: none;
}
.show{
    display: contents;
}

.image{

    width: 50px;
    height: 50px;
    border: 2px solid #00E2FF;
    border-radius: 20px;
    background-image: linear-gradient(135deg,#515151 25% ,transparent 0),
      linear-gradient(-45deg,#515151 25% ,transparent 0),
      linear-gradient(135deg,#515151 25% ,transparent 0),
      linear-gradient(-45deg,#515151 25% ,transparent 0);
    background-size: 5px 5px;
    background-position: 0 0,-6px -5px, 5px 5px,-1px 0px;
    background-repeat: repeat;
}

.BUTTON_KTH {
    position: absolute;
    display: block;
    left:40%;
    top:40%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color: #00E2FF;
    font-family: Brush Script MT;
    font-size: 41px;
    font-weight: 400;
    padding: 22px;
    background-color: #000000;
    -webkit-box-shadow: 1px 1px 20px 0 #000000;
    -moz-box-shadow: 1px 1px 20px 0 #000000;
    box-shadow: 1px 1px 20px 0 #000000;
    text-shadow: 1px 1px 20px #000000;
    border: solid #00E2FF 7px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
 }
 
 .BUTTON_KTH:hover {
    background: #000000;
    border: solid #00E2FF 5px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-decoration: none;
 }

 @-webkit-keyframes rotate-scale-down {
    0% {
      -webkit-transform: scale(1) rotateZ(0);
              transform: scale(1) rotateZ(0);
    }
    50% {
      -webkit-transform: scale(0.5) rotateZ(180deg);
              transform: scale(0.5) rotateZ(180deg);
    }
    100% {
      -webkit-transform: scale(1) rotateZ(360deg);
              transform: scale(1) rotateZ(360deg);
    }
  }
  @keyframes rotate-scale-down {
    0% {
      -webkit-transform: scale(1) rotateZ(0);
              transform: scale(1) rotateZ(0);
    }
    50% {
      -webkit-transform: scale(0.5) rotateZ(180deg);
              transform: scale(0.5) rotateZ(180deg);
    }
    100% {
      -webkit-transform: scale(1) rotateZ(360deg);
              transform: scale(1) rotateZ(360deg);
    }
  }

.rotate-scale-down {
	-webkit-animation: rotate-scale-down 2s linear both;
	        animation: rotate-scale-down 2s linear both;
}

#game_instructions img{
  width: 100px;
  height: 100px;
}

#game_instructions p{
  text-indent: 2em;
}

#instructions p{
  font-size: xxx-large;
  padding: 10px 80px;
  opacity: 1;
}

#instructions{
  
  background-size: 350px 350px;
}